<template>
  <div class='audioComponent'>
    <div class="controlContainer">
      <!-- 歌曲图片 -->
      <div
        class="musicPic"
        @click="$emit('showPopup')"
      >
        <div
          v-if="playedSongObj.al.picUrl"
        >
          <img
            :src="playedSongObj.al.picUrl + '?param=100y100'"
            width="100%"
          >
        </div>
        <div v-else>
          <img src="../image/logo.png" width="100%">
        </div>
      </div>
      <!-- / 歌曲图片 -->

      <!-- 详情展示 -->
      <div class="MusicResult">
        <!-- 歌曲名称与倒计时 -->
        <div class="songNameBox">
          <div class="songName">
            {{ playedSongObj.name ? playedSongObj.name : '未播放' }}
          </div>
          <div class="countDown">
            {{ countDown | filterMusicTimeMin }}
          </div>
        </div>
        <!-- / 歌曲名称与倒计时 -->
        <!-- 进度条 -->
        <div class="progressBar">
          <div class="progressBarClor" :style="{width: step + '%'}"></div>
          <div class="bufferProgressBarColor" :style="{width: bufferBrogressBar + '%'}"></div>
        </div>
        <!-- / 进度条 -->
      </div>
      <!-- / 详情展示 -->

      <!-- 播放、暂停按钮 -->
      <div class="senspend">
        <i
          v-if="isPlayStatus"
          class="iconfont icon-zanting"
          @click="pauseSong"
        >
        </i>
        <i
          v-else
          class="iconfont icon-bofang"
          @click="playSong"
        >
        </i>
      </div>
      <!-- / 播放、暂停按钮 -->
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'audioComponent',
  components: {},
  props: {},
  data () {
    return {
      isPopupShow: false
    }
  },
  computed: {
    ...mapState(['playingSongList', 'playedSongObj', 'step', 'bufferBrogressBar', 'countDown', 'isPlayStatus', 'audio'])
  },
  watch: {},
  created () {},
  mounted () {},
  destroyed () {},
  methods: {
    // 播放歌曲
    playSong () {
      // 没有正在播放的歌曲则根据 songIndex 重新播放
      if (!this.audio.currentSrc) {
        this.$emit('storagePlayingSongList')
        this.$store.commit('setPlayedSongIndex', 0)
        // this.$store.commit('setPlayedSongId', this.playingSongList[this.playedSongIndex].id)
      }
      this.audio.play()
      this.$store.commit('setPlayStatus', true)
    },
    // 暂停播放歌曲
    pauseSong () {
      this.audio.pause()
      this.$store.commit('setPlayStatus', false)
    }
  }
}
</script>
<style lang='less' scoped>
@import "../../styles/common.less";
.audioComponent {
  height: 70px;
  width: 100%;
  background-color: #FFFFFF;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 10px 10px 0px 0px;
  box-shadow: 0px 0px 3px rgba(116, 116, 116, 0.1);
  overflow: hidden;
  .controlContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  .musicPic {
    height: 70px;
    width: 70px;
    }
    .MusicResult {
      .songNameBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        .songName {
          width: 195px;
          display: block;
          color: #383838;
          font-size: 16px;
          margin: 0;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .countDown {
          width: 42px;
          font-size:  12px;
          white-space: nowrap;
          font-feature-settings: "tnum";
          text-align: right;
          overflow: hidden;
        }
      }
      .progressBar {
        width: 240px;
        height: 4px;
        border-radius: 10px;
        background-color: rgb(230, 230, 230);
        overflow: hidden;
        position: relative;
        .progressBarClor {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          height: 4px;
          width: 0px;
          background-color: @themeColor;
        }
        .bufferProgressBarColor {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          height: 4px;
          width: 0px;
          background-color: #fbd7cf;
        }
      }
    }
    .senspend {
      width: 38px;
    }
    .icon-zanting {
      font-size: 28px;
    }
    .icon-bofang {
      font-size: 28px;
    }
  }
}
</style>
